<template>
  <div id="videoCheck">
    <h1 class="con-right-title">
      长视频内容审核
    </h1>
    <div class="bottom-box">
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:longVideo:check:public'"
            type="warning"
            icon="el-icon-check"
            @click="handlePass('PUBLIC')"
          >
            公开展示
          </el-button>
          <el-button
            v-permission="'wh:system:longVideo:check:userhome'"
            type="warning"
            icon="el-icon-check"
            @click="handlePass('USERHOME')"
          >
            仅主页展示
          </el-button>
          <el-button
            v-permission="'wh:system:longVideo:check:noadopt'"
            type="warning"
            icon="el-icon-close"
            plain
            @click="notPass()"
          >
            不通过
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
          <selectColumn
            ref="selectCum"
            @setColumn="setColumns"
            :nameList="columnList"
          ></selectColumn>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%;"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
            :selectable="selectAble"
          ></el-table-column>
          <el-table-column type="index" width="50" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.nickname"
            label="昵称"
            prop="user.nickname"
            min-width="60"
          >
            <template slot-scope="scope">
              {{
                scope.row.user && scope.row.user.nickname ? scope.row.user.nickname : ''
              }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.dpAccount"
            label="大鹏号"
            prop="user.dpAccount"
            min-width="80"
          >
            <template slot-scope="scope">
              {{
                scope.row.user && scope.row.user.dpAccount
                  ? scope.row.user.dpAccount
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.title"
            label="文字标题"
            width="150"
            class-name="text-overflow"
            prop="title"
            min-width="180"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.title"
                v-html="filterContent(scope.row.title)"
                @click="handleDetail(scope.row)"
                >{{ scope.row.title }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.cover"
            label="视图内容"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <!--视频-->
              <span class="img-box" @click="videoPlay(scope.row.vid)">
                <div class="img-inner-box">
                  <el-image fit="contain" :src="scope.row.cover"></el-image>
                </div>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.createdDate"
            label="创建时间"
            prop="createdDate"
            min-width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.createdDate }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.labelPrope"
            label="显性标签"
            prop="labelPrope"
            min-width="260"
          >
            <template slot-scope="scope">
              <explicitTag
                :labels="scope.row.labels"
                :showContentId="scope.row.id"
                @refresh="refresh"
              ></explicitTag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.userProperty"
            label="用户属性"
            prop="userProperty"
            min-width="80"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.userProperty"
                class="tag-span"
                :class="scope.row.userProperty | filterClass('jobCheckAttr')"
                >{{ scope.row.userProperty | filterName('jobCheckAttr') }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.machineTime"
            label="发布时间"
            prop="machineTime"
            min-width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.machineTime | timeToTime }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.machineStatus"
            label="机审结果"
            prop="machineStatus"
            min-width="90"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.machineStatus === 'PASS'"
                class="tag-span primary"
                >通过</span
              >
              <span
                v-if="scope.row.machineStatus === 'FAIL'"
                class="tag-span danger hand"
                >未通过</span
              >
              <span
                v-if="scope.row.machineStatus === 'UNAUDITED'"
                class="tag-span default"
                >未审核</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.checkStatus"
            label="人工审核结果"
            prop="checkStatus"
            min-width="110"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.checkStatus === 'PASS'"
                class="tag-span primary"
                >通过</span
              >
              <span
                v-if="scope.row.checkStatus === 'FAIL'"
                class="tag-span danger hand"
                >未通过</span
              >
              <span
                v-if="scope.row.checkStatus === 'UNAUDITED'"
                class="tag-span default"
                >未审核</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.displayRule"
            class="displayType"
            label="展示方式"
            prop="displayRule"
            min-width="90"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.displayRule"
                class="tag-span"
                :class="scope.row.displayRule | filterClass('displayType')"
                >{{ scope.row.displayRule | filterName('displayType') }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.checkName"
            label="审核人"
            prop="checkName"
            min-width="80"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.checkName"> {{ scope.row.checkName }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnSHow.checkTime"
            label="人工审核时间"
            prop="checkTime"
            min-width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.checkTime">
                {{ scope.row.checkTime | timeToTime }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <el-button
                v-permission="'wh:system:longVideo:check:public'"
                v-if="scope.row.checkStatus === 'UNAUDITED'"
                type="text"
                @click="singlePublicPass('PUBLIC', scope.row)"
              >
                公开展示
              </el-button>
              <el-button
                v-permission="'wh:system:longVideo:check:userhome'"
                v-if="scope.row.checkStatus === 'UNAUDITED'"
                type="text"
                @click="singlePublicPass('USERHOME', scope.row)"
              >
                仅主页可见
              </el-button>
              <el-button
                v-permission="'wh:system:longVideo:check:noadopt'"
                v-if="scope.row.checkStatus === 'UNAUDITED'"
                type="text"
                @click="handlNotPassWord(scope.row)"
              >
                不通过
              </el-button>
              <el-button
                v-permission="'wh:system:longVideo:check:reason'"
                v-if="scope.row.checkStatus === 'FAIL'"
                type="text"
                @click="showFailReason(scope.row)"
              >
                未通过理由
              </el-button>
              <el-button
                v-permission="'wh:system:longVideo:check:detail'"
                type="text"
                @click="handleDetail(scope.row)"
              >
                查看详情
              </el-button>
              <el-button
                v-permission="'wh:system:videoContentExamined:delete'"
                v-if="scope.row.checkStatus === 'PASS'"
                type="text"
                @click="deleteWork(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!---长视频单个 --- 查看详情-->
        <detailDialog
          v-if="dialogData.isShow"
          :dialog-data="dialogData"
        ></detailDialog>
        <!---长视频批量 --- 查看详情-->
        <batchDetailDialog
          v-if="batchDialogData.isShow"
          :dialog-data="batchDialogData"
        ></batchDetailDialog>
        <!-- 不通过理由弹窗 -->
        <del-dialog
          :del-dialog-data="delDialogData"
          @reasonDel="failRequest"
        ></del-dialog>
        <!--播放视频组件-->
        <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
      </div>
    </div>
  </div>
</template>

<script>
import topSearch from '@component/longVidManagement/videoCheck/topSearch' // 上部搜索条件
import detailDialog from '@component/longVidManagement/common/detailDialog' // 长视频单个 --- 查看详情
import batchDetailDialog from '@component/longVidManagement/videoCheck/batchDetailDialog' // 长视频批量 --- 查看详情
import { contentToStr, getVideoPara } from '@utils/pubFunction'
import showVideo from '@common/showVideo'
import { getVideoImg } from '@utils/getFaceImg'
import delDialog from '@common/delDialog' // 不通过理由弹窗
import { getvideoList, putReads } from '@/api/longVidManagement/videoCheck'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { columnMixin } from '@/mixins/columnShowHide'
import explicitTag from '@common/explicitTag'

export default {
  name: 'check',
  msg: '',
  mixins: [saveScrollMixins, columnMixin],
  components: {
    topSearch,
    delDialog,
    showVideo,
    detailDialog,
    batchDetailDialog,
    explicitTag
  },
  data() {
    return {
      loading: false,
      total: 0, // 搜索条件
      tableTemp: [], // table替代
      tempSize: 0,
      alldisabled: true, // 公开展示按钮禁用状态
      mdisabled: true, // 仅主页展示按钮禁用状态
      notdisabled: true, // 不通过按钮禁用状态
      formInline: {
        movieAuditTypeEnum: '', // 审核内容，单个/批量
        autoVerify: '', // 机审结果
        manualVerify: '', // 人审结果
        orderWay: '',
        content: '',
        userType: '',
        userValue: '',
        verifyUserId: '', // 审核人
        timeType: '', // 顺序2
        showType: '', // 展示方式
        timeLine: '',
        userProperty: '', // 用户属性
        startTime: '',
        endTime: '',
        pubStartTime: '',
        pubEndTime: ''
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      multipleSelection: [],
      powerStr: 'system:videoContentExamined:list', // 是否查询的标识
      powerAry: [], // 可显示的权限
      canShowPage: false, // 是否显示当前页面
      // 表格数据
      tableData: [],
      // 单个 - 查看详情
      dialogData: {
        isShow: false, // 默认隐藏
        params: ''
      },
      // 批量 - 查看详情
      batchDialogData: {
        isShow: false, // 默认隐藏
        params: ''
      },
      delDialogData: {
        isShow: false,
        params: '',
        type: '不通过'
      },
      videoData: {
        // 视频播放弹窗
        isShow: false,
        vid: ''
      },
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: ''
      },
      columnList: [
        { label: '昵称', value: 'nickname' },
        { label: '大鹏号', value: 'dpAccount' },
        { label: '文字内容', value: 'title' },
        { label: '视图内容', value: 'cover' },
        { label: '创建时间', value: 'createdDate' },
        { label: '显性标签', value: 'labelPrope' },
        { label: '用户属性', value: 'userProperty' },
        { label: '发布时间', value: 'machineTime' },
        { label: '机审结果', value: 'machineStatus' },
        { label: '人工审核结果', value: 'checkStatus' },
        { label: '展示方式', value: 'displayRule' },
        { label: '审核人', value: 'checkName' },
        { label: '人工审核时间', value: 'checkTime' }
      ],
      movieAuditTypeEnum: ''
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
        this.$refs['selectCum'].setChoose(this.columnAry)
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          return false
        }
      })
    },
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then(
        (res) => {
          // 接口请求正常
          this.polivNum.polyvUserId = res.polyvUserId
          this.polivNum.polyvSecretKey = res.polyvSecretKey
          let n = 0
          if (!this.tableTemp || this.tableTemp.length === 0) {
            return
          }
          this.tableTemp.forEach((item, index) => {
            _this.getImg(item.vid, index).then(
              (data) => {
                n++
                _this.setData(n)
              },
              () => {
                n++
                _this.setData(n)
              }
            )
          })
        },
        (res) => {
          // 接口请求不正常正常
          _this.tableData = [..._this.tableTemp]
        }
      )
    },
    /*  符合条件后，给table赋值 */
    setData(n) {
      if (n === this.tempSize) {
        this.loading = false
        this.tableData = [...this.tableTemp]
      }
    },
    /* 获取封面图 */
    getImg(vid, index) {
      if (!vid) return Promise.resolve(false)
      let _this = this
      return getVideoImg(vid, this.polivNum).then(
        (res) => {
          _this.tableTemp[index].cover = res
          return Promise.resolve(true)
        },
        (error) => {
          return Promise.reject(error)
        }
      )
    },
    /* 播放视频 */
    videoPlay(vid) {
      /* console.log("index-vid=" + vid); */
      if (!vid) {
        this.$message.warning('无视频资源！')
        return
      }
      this.videoData.vid = vid
      this.videoData.isShow = true
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      const params = {}
      // 非空判断，只传有值的字段
      Object.keys(this.formInline).forEach((key) => {
        if (this.formInline[key] !== '') {
          params[key] = this.formInline[key]
        }
      })
      let obj = Object.assign({}, this.searchParams, params)
      if (obj.orderWay === 'ASC2') {
        obj.orderWay = 'ASC'
      }
      if (obj.orderWay === 'DESC2') {
        obj.orderWay = 'DESC'
      }
      delete obj.createTime
      getvideoList(
        obj,
        (response) => {
          this.loading = false
          this.tableTemp = response.rows
          this.tableData = response.rows
          this.tempSize = response.rows.length
          this.total = response.total
          this.getPolivNum()
        },
        (response) => {
          this.loading = false
          this.message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.alldisabled = false
      this.mdisabled = false
      this.notdisabled = false
      if (this.multipleSelection.length === 0) {
        this.notdisabled = true
        this.alldisabled = true
        this.mdisabled = true
      }
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    // 查看详情
    handleDetail(row) {
      if (row.checkStatus === 'FAIL') {
        return
      }
      if (this.movieAuditTypeEnum === 'MOVIES_SINGLE') {
        //单个
        this.dialogData.isShow = true
        this.dialogData.params = row.id
      } else {
        //批量
        this.batchDialogData.isShow = true
        this.batchDialogData.params = row.id
        this.batchDialogData.createdDate = row.createdDate
        this.batchDialogData.title = row.title
        this.batchDialogData.dpAccount = row.user.dpAccount
      }
    },
    // 批量公开展示/仅主页展示
    handlePass(type) {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要审核通过选中的${this.multipleSelection.length}条数据吗?`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let articleIds = []
        let key = this.movieAuditTypeEnum === 'MOVIES_SINGLE' ? 'id' : 'vid'
        this.multipleSelection.forEach((item) => {
          articleIds.push(item[key])
        })
        let data = {
          articleIds,
          movieAuditTypeEnum: this.movieAuditTypeEnum,
          type,
          status: 'PASS'
        }
        putReads(data, (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    // 单个公开展示/仅首页展示
    singlePublicPass(type, row) {
      let articleIds = []
      //长视频单个，取id；长视频批量，取vid
      let id = this.movieAuditTypeEnum === 'MOVIES_SINGLE' ? row.id : row.vid
      articleIds.push(id)
      let data = {
        articleIds,
        movieAuditTypeEnum: this.movieAuditTypeEnum,
        type,
        status: 'PASS'
      }
      this.$confirm('确定审核通过该条长视频内容审核信息吗？', '通过提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          putReads(data, (response) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.searchList()
          })
        })
        .catch(() => {})
    },
    // 删除
    deleteWork(row) {
      this.id =
        this.movieAuditTypeEnum === 'MOVIES_SINGLE' ? [row.id] : [row.vid]
      this.isDelete = true
      this.delDialogData.isShow = true
      this.delDialogData.type = '删除'
    },
    /* 批量不通过 */
    notPass() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      let key = this.movieAuditTypeEnum === 'MOVIES_SINGLE' ? 'id' : 'vid'
      this.multipleSelection.forEach((item) => {
        ids.push(item[key])
      })
      this.id = ids
      this.delDialogData.isShow = true
    },
    /* 不通过单个 */
    handlNotPassWord(row) {
      this.id =
        this.movieAuditTypeEnum === 'MOVIES_SINGLE' ? [row.id] : [row.vid]
      this.delDialogData.isShow = true
      this.delDialogData.type = '不通过'
    },
    // 子组件不通过事件
    failRequest(reason) {
      let ids = []
      ids = ids.concat(this.id)
      if (this.isDelete) {
        this.deleteReads(ids, reason)
      } else {
        this.noPassRequest(ids, reason)
      }
    },
    // 删除内容
    deleteReads(ids, reason) {
      let type = this.delDialogData.type
      this.$confirm(
        `${type}理由：${reason} 确认${type}该条信息？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let params = {
          articleIds: ids,
          movieAuditTypeEnum: this.movieAuditTypeEnum,
          reason,
          status: 'FAIL'
        }
        putReads(params, (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    // 不通过多条请求
    noPassRequest(ids, reason) {
      let type = this.delDialogData.type
      this.$confirm(
        `${type}理由：${reason} 确认${type}该条信息？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let params = {
          articleIds: ids,
          movieAuditTypeEnum: this.movieAuditTypeEnum,
          reason,
          status: 'FAIL'
        }
        putReads(params, (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        })
      })
    },
    // 显示未通过理由
    showFailReason(row) {
      this.$alert(row.reason, '不通过理由', {
        showConfirmButton: false
      }).catch(() => {})
    },
    /* 搜索 */
    toSearch() {
      this.movieAuditTypeEnum = this.formInline.movieAuditTypeEnum
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    selectAble(row, index) {
      if (row.checkStatus === 'UNAUDITED') {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="less">
#videoCheck {
  @import url('~@common/style/imgBox.less');
  @import url('~@common/style/clamp.less');
  .text-overflow {
    cursor: pointer;
    .cell {
      /*覆盖引入的公共样式-clamp.less*/
      -webkit-line-clamp: 10;
    }
  }
}
</style>
